<template>
  <el-row :gutter="10">
    <el-col class="pb-2" :span="6" :xs="24" v-for="(item, index) in list" :key="index">
      <el-card shadow="never">
        <template #header>
          <div class="flex-y-center justify-between">
            <div class="flex-y-center">
              <Icon :name="item.icon" :color="item.color" size="30" />
              <span class="ml-1">{{ item.name }}</span>
            </div>
            <div class="text-xs text-gray">{{ item.date }}</div>
          </div>
        </template>
        <div class="flex-y-center justify-between">
          <div class="text-3xl">{{ item.number }}</div>
          <div class="flex-center" v-if="0">
            <el-tag :type="item.ratio.includes('+') ? 'success' : 'danger'">
              {{ item.ratio }}
            </el-tag>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { shareLinkDataApi } from "@/api/home";
import { reactive } from 'vue'
import moment from 'moment'

defineOptions({ name: 'TopCard' });
const list = reactive([
  {
    name: '分享链接点击数',
    date: '今日',
    icon: 'el-icon-Share',
    number: '0',
    color: '#2d8cf0',
    ratio: '+4%'
  },
  {
    name: '分享链接点击数',
    date: '近7日',
    icon: 'el-icon-Share',
    number: '0',
    color: '#41B651',
    ratio: '+4%'
  },
  {
    name: '新增店铺数量',
    date: '今日',
    icon: 'el-icon-help',
    number: '0',
    color: '#b37feb',
    ratio: '-20%'
  },
  {
    name: '新增店铺数量',
    date: '近7日',
    icon: 'el-icon-help',
    number: '0',
    color: '#F19041',
    ratio: '-20%'
  },
  {
    name: '订单数量',
    date: '今日',
    icon: 'el-icon-Goods',
    number: '0',
    color: '#b37feb',
    ratio: '-20%'
  },
  {
    name: '订单数量',
    date: '近7日',
    icon: 'el-icon-Goods',
    number: '0',
    color: '#E6E347',
    ratio: '-20%'
  },
  {
    name: '销售金额',
    date: '今日',
    icon: 'el-icon-tickets',
    number: '￥0',
    color: '#f49776',
    ratio: '+38%'
  },
  {
    name: '销售金额',
    date: '近7日',
    icon: 'el-icon-tickets',
    number: '￥0',
    color: '#2ccb98',
    ratio: '-13%'
  }
]);
const getShareLinkDataFun = () => {
  shareLinkDataApi().then((res) => {
    console.log(res);
    const { data } = res;
    const { linkData,shopData, orderData } = data;
    console.log(linkData,orderData, shopData);

    const nowDate = moment().format('YYYY-MM-DD')
    let shear7Day=0
    linkData.forEach((item:any) => {
        const dataDate = moment(item._id).format('YYYY-MM-DD')
        if(moment(nowDate).isSame(dataDate)) {
            list[0].number= item.todayCount
        }
        // 时间在7天内的
        if(moment(nowDate).diff(dataDate, 'days') <= 7) {
            shear7Day += item.todayCount
        }

        // console.log('time', time)
    })
    list[1].number= shear7Day+''

    let shop7Day=0
    shopData.forEach((item:any) => {
        const dataDate = moment(item._id).format('YYYY-MM-DD')
        if(moment(nowDate).isSame(dataDate)) {
            console.log('是同一天', item)
            list[2].number= item.todayCount
        }
        // 时间在7天内的
        if(moment(nowDate).diff(dataDate, 'days') <= 7) {
            console.log('是7天内的', item)
            shop7Day += item.todayCount
        }  
    })
    list[3].number= shop7Day+''
    let order7Number=0
    let order7money=0
    orderData.forEach((item:any) => {
        const dataDate = moment(item._id).format('YYYY-MM-DD')
        if(moment(nowDate).isSame(dataDate)) {
            console.log('是同一天', item)
            list[4].number= item.todayCount
            list[6].number= `￥${(item.allPayAmount/100).toFixed(2)}`
        }
        // 时间在7天内的
        if(moment(nowDate).diff(dataDate, 'days') <= 7) {
            console.log('是7天内的', item)
            order7Number += item.todayCount
            order7money += item.allPayAmount
        }  
    })
    list[5].number= order7Number+''
    list[7].number = `￥${(order7money/100).toFixed(2)}`
  })
}
getShareLinkDataFun()

</script>

<style lang="scss" scoped></style>
